div,
view {
  box-sizing: border-box;
}

// 文字对齐，去掉后缀数字
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
// Flex 布局
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-nowrap {
  flex-wrap: nowrap;
}
.flex-1 {
  flex: 1;
}
.flex-auto {
  flex: auto;
}
.flex-none {
  flex: none;
}

// Flex 对齐方式
.items-start {
  align-items: flex-start;
}
.items-center {
  align-items: center;
}
.items-end {
  align-items: flex-end;
}
.items-stretch {
  align-items: stretch;
}

.justify-start {
  justify-content: flex-start;
}
.justify-center {
  justify-content: center;
}
.justify-end {
  justify-content: flex-end;
}
.justify-between {
  justify-content: space-between;
}
.justify-around {
  justify-content: space-around;
}
.justify-evenly {
  justify-content: space-evenly;
}

.h-0 {
  height: 0;
}
.h-100 {
  height: 100%;
}
.w-0 {
  width: 0;
}
.w-100 {
  width: 100%;
}

.color-999 {
  color: #999;
}

@for $i from 1 through 70 {
  @if $i <= 7 {
    .w-line-#{$i} {
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: #{$i}; // 限制行数
      text-overflow: ellipsis;
    }
    .font-weight-#{$i * 100} {
      font-weight: $i * 100;
    }
  }
  $unit: #{$i}rpx;
  // @if $i >= 10 and $i <= 60 {
  .bdrd-#{$i} {
    border-radius: $unit;
  }
  .gap-#{$i} {
    gap: $unit;
  }
  .font-size-#{$i} {
    font-size: $unit;
  }
  .w-#{$i} {
    width: $unit;
  }
  .h-#{$i} {
    height: $unit;
  }
  .lh-#{$i} {
    line-height: $unit;
  }

  // Margin
  .m-t-#{$i} {
    margin-top: $unit;
  }
  .m-r-#{$i} {
    margin-right: $unit;
  }
  .m-b-#{$i} {
    margin-bottom: $unit;
  }
  .m-l-#{$i} {
    margin-left: $unit;
  }

  .m-x-#{$i} {
    margin-left: $unit;
    margin-right: $unit;
  }
  .m-y-#{$i} {
    margin-top: $unit;
    margin-bottom: $unit;
  }
  .m-#{$i} {
    margin: $unit;
  }

  // Padding
  .p-t-#{$i} {
    padding-top: $unit;
  }
  .p-r-#{$i} {
    padding-right: $unit;
  }
  .p-b-#{$i} {
    padding-bottom: $unit;
  }
  .p-l-#{$i} {
    padding-left: $unit;
  }

  .p-x-#{$i} {
    padding-left: $unit;
    padding-right: $unit;
  }
  .p-y-#{$i} {
    padding-top: $unit;
    padding-bottom: $unit;
  }
  .p-#{$i} {
    padding: $unit;
  }
  // }
}
.m-x-auto {
  margin: 0 auto;
}
.m-y-auto {
  margin: auto 0;
}
